<template>
    
        <div id="PublishPage">
            <mt-header title="发布新文章" >
                <router-link to="/index" slot="left">
                    <mt-button icon="back">返回</mt-button>
                </router-link>
            </mt-header>
           <!-- <h1 ref='main_title'>1111</h1> -->
            <div class="contain">
            <div class="content">
                <span class="schoolNews "  :class="{'PublishPageBgcolor':isShow}" @click="transsBgcolor" >校园新闻</span>
                <span class="schoolPhoto"  :class="{'PublishPageBgcolor':isActive}" @click="transaBgcolor">校园随手拍</span>
            </div>
            <area-text  classify="校园新闻-标题"  :calssify_msg=this.$store.state.schoolNews v-show="isShow" @getValue="getDate"></area-text>
            <area-text  classify="校园随手拍-标题" :calssify_msg=this.$store.state.schoolPhoto v-show="isActive"></area-text>
            <h1>{{msg}}</h1>
            <!-- 上传照片 -->
            <photo-upload></photo-upload>
                <mt-button type="primary" class="publishBtn" size='large' @click="preview">预览</mt-button>
       </div>
    </div>
</template>
<script>
import AreaText from './AreaText'
import PhotoUpload from './PhotoUpload'
import PhotoList from '@/components/PhotoList'

    export default{
        data(){
            return {
              isShow:true, 
              isActive:false ,
              msg:'',
            }
        },
        components:{
            AreaText,
            PhotoList,
            PhotoUpload
        },
        methods:{
             //切换到校园新闻组件
            transsBgcolor(){
              this.isShow=true;
              this.isActive=false;
              console.log(document.getElementsByTagName('span')[1].innerHTML);
              console.log(this.$store.state);
              
            },
            //切换到校园随手拍组件
            transaBgcolor(){
                this.isShow=false;
                this.isActive=true;
                this.$store.state.schoolNews='';
                this.$store.state.schoolPhoto=document.getElementsByTagName('span')[2].innerHTML;
                //console.log(this.$store.state.schoolPhoto);
                //console.log(document.getElementsByTagName('span')[2].innerHTML);
            },
            //子传父发送发布内容
            getDate(res){
                this.msg=res;
            },
            // 切换预览组件
            preview(){
              this.$router.push({path:'/publish/mpage'})
            },
        },
        created(){
           
        },
        mounted(){
           this.$store.state.schoolNews=document.getElementsByTagName('span')[1].innerHTML;
        },
        computed:{
            count(){
                return this.$store.state.num;
            }
        }
    }
</script>
<style>
    #PublishPage{
         background: #eee;
    }
    .PublishPageBgcolor{
        background:  #F8D543 !important;
    }
    #PublishPage .contain{
        width:90%;
        /* border: 1px solid red; */
        margin:0 auto;  
       
    }
    #PublishPage .contain .content{
        width:100%;
        display:flex;
        justify-content:space-between;
        margin:0.4rem 0 0.4rem 0px;
        /* border: 1px solid pink; */
    }
    #PublishPage .contain .content .schoolNews{
        color:#fff;
        /* background: #F8D543; */
    }
     #PublishPage .contain .content span{
         background: #DCDCDC;
         display:block;
         width:4rem;
         height:0.9333rem;
         line-height:0.9333rem;
         border-radius:0.1333rem;
     }
     #PublishPage textarea{
        width:100%;
        height:2.6667rem;
        border-radius:0.1333rem;
     }
     #PublishPage .txt textarea{
         height:5.6667rem;
         margin-top:0.2133rem;
     }
     #PublishPage .publishPhoto{
         /* border: 1px solid yellow; */
         display: flex;
         justify-content: space-between;
     }
    #PublishPage .publishPhoto ul li{
        width:1.3667rem;
        height:1.3667rem;
        flex-wrap: nowrap;
        list-style:none;   
        background: #B5B5B5;
    }
    #PublishPage .publishPhoto ul li .transverseLine{
       font-size: 1.3667rem;
       color: #fff;
        /* position: absolute;
        top:20;
        left:10; */
        font-weight: lighter;
        text-align: center;
        line-height: 1.6rem;
        
       
    }
    #PublishPage .publishBtn{
      background:  #4BE29B;
      font-size:0.4667rem;
      width: 150px;
      height:40px;
      margin: 60px auto;
    }
   .upload_warp_left{
       width:0;
       height:0;
       border:0 !important;
   }
</style>

